<template>
	<view class="content">
		<image class="top-bg" mode="widthFix" src="https://ysz.gshwsc.com/api/file/img/found_top_bg_2.jpg"></image>
		<!-- <CustomNav :isBack="false" :custom="custom"></CustomNav> -->
		<view class="block list-block">
			<view class="list-tab-block">
				<view v-for="(item,index) in tab" :key="item.id" :class="tabActive==item.id?'active':''"
					@click="tabActive=item.id;getList(item.id)" class="list-tab-item">{{item.value}}</view>
			</view>
			<view class="list-content-block">
				<block v-if="tabActive==1">
					<view class="list-content">
						<view class="list-col">
							<view v-for="(item,index) in list.colA" :key="item.id"
								@click="jump('/pages/hotel/list?id='+item.id)" class="list-item">
								<view class="photo-block">
									<image mode="widthFix" class="photo" :src="item.picUrl"></image>
									<view v-if=" item.address" class="position">
										<view class="iconfont icon-weizhi"></view>{{item.address}}
									</view>
								</view>
								<view class="info">
									<view class="title">{{item.title}}</view>
									<view class="label-block">
										<view v-for="(item1,index1) in item.label" class="label-item">{{item1}}</view>
									</view>
									<view v-if="item.price" class="price-block">
										<view class="price">￥{{item.price}}</view>
										<view class="sold-num">已售{{item.comNum}}</view>
									</view>
								</view>
							</view>
						</view>
						<view class="list-col">
							<view v-for="(item,index) in list.colB" :key="item.id"
								@click="jump('/pages/hotel/list?id='+item.id)" class="list-item">
								<view class="photo-block">
									<image mode="widthFix" class="photo" :src="item.picUrl"></image>
									<view v-if=" item.address" class="position">
										<view class="iconfont icon-weizhi"></view>{{item.address}}
									</view>
								</view>
								<view class="info">
									<view class="title">{{item.title}}</view>
									<view class="label-block">
										<view v-for="(item1,index1) in item.label" class="label-item">{{item1}}</view>
									</view>
									<view v-if="item.price" class="price-block">
										<view class="price">￥{{item.price}}</view>
										<view class="sold-num">已售{{item.comNum}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
				<block v-if="tabActive==2">
					<view class="list-content">
						<view class="list-col">
							<view v-for="(item,index) in list.colA" :key="item.id"
								@click="jump('/pages/attractions/tickets?id='+item.id)" class="list-item">
								<view class="photo-block">
									<image mode="widthFix" class="photo" :src="item.picUrl"></image>
									<view v-if=" item.viewList" class="position">
										<view class="iconfont icon-weizhi"></view>酒泉人气排行榜第{{item.viewList}}
									</view>
								</view>
								<view class="info">
									<view class="title">{{item.title}}</view>

									<view v-if="item.score" class="price-block">
										<view class="price-name">评分:</view>
										<view class="price">{{item.score}}</view>
										<view class="sold-num">
											<text v-if="item.free==1">免费</text>
											<text v-if="item.free==2">收费</text>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="list-col">
							<view v-for="(item,index) in list.colB" :key="item.id"
								@click="jump('/pages/attractions/tickets?id='+item.id)" class="list-item">
								<view class="photo-block">
									<image mode="widthFix" class="photo" :src="item.picUrl"></image>
									<view v-if=" item.viewList" class="position">
										<view class="iconfont icon-weizhi"></view>酒泉人气排行榜第{{item.viewList}}
									</view>
								</view>
								<view class="info">
									<view class="title">{{item.title}}</view>
									<view v-if="item.score" class="price-block">
										<view class="price-name">评分:</view>
										<view class="price">{{item.score}}</view>
										<view class="sold-num">
											<text v-if="item.free==1">免费</text>
											<text v-if="item.free==2">收费</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
				<block v-if="tabActive==3">
					<view class="list-content">
						<view class="list-col">
							<view v-for="(item,index) in list.colA" :key="item.id"
								@click="jump('/pages/tourism_service/newDetail?id='+item.id)" class="list-item">
								<view class="photo-block">
									<image mode="widthFix" class="photo" :src="item.picUrl"></image>
									<view v-if=" item.address" class="position">
										<view class="iconfont icon-weizhi"></view>{{item.address}}
									</view>
								</view>
								<view class="info">
									<view class="title">{{item.title}}</view>
									<view class="label-block">
										<view v-for="(item1,index1) in item.label" class="label-item">{{item1}}</view>
									</view>
									<view v-if="item.price" class="price-block">
										<view class="price">￥{{item.price}}</view>
										<view class="sold-num">电话{{item.telPhone}}</view>
									</view>
								</view>
							</view>
						</view>
						<view class="list-col">
							<view v-for="(item,index) in list.colB" :key="item.id"
								@click="jump('/pages/tourism_service/newDetail?id='+item.id)" class="list-item">
								<view class="photo-block">
									<image mode="widthFix" class="photo" :src="item.picUrl"></image>
									<view v-if=" item.address" class="position">
										<view class="iconfont icon-weizhi"></view>{{item.address}}
									</view>
								</view>
								<view class="info">
									<view class="title">{{item.title}}</view>
									<view class="label-block">
										<view v-for="(item1,index1) in item.label" class="label-item">{{item1}}</view>
									</view>
									<view v-if="item.price" class="price-block">
										<view class="price">￥{{item.price}}</view>
										<view class="sold-num">电话{{item.telPhone}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
				<block v-if="tabActive==4">
					<view class="list-content">
						<view class="list-col">
							<view v-for="(item,index) in list.colA" :key="item.id"
								@click="jump('/pages/specialties/index?id='+item.id)" class="list-item">
								<view class="photo-block">
									<image mode="widthFix" class="photo" :src="item.picUrl"></image>
									<view v-if=" item.address" class="position">
										<view class="iconfont icon-weizhi"></view>{{item.address}}
									</view>
								</view>
								<view class="info">
									<view class="title">{{item.shopName}}</view>

									<view v-if="item.price" class="price-block">
										<view class="price">{{item.price}}</view>

									</view>
								</view>
							</view>
						</view>
						<view class="list-col">
							<view v-for="(item,index) in list.colB" :key="item.id"
								@click="jump('/pages/specialties/index?id='+item.id)" class="list-item">
								<view class="photo-block">
									<image mode="widthFix" class="photo" :src="item.picUrl"></image>
									<view v-if=" item.address" class="position">
										<view class="iconfont icon-weizhi"></view>{{item.address}}
									</view>
								</view>
								<view class="info">
									<view class="title">{{item.shopName}}</view>

									<view v-if="item.price" class="price-block">
										<view class="price">{{item.price}}</view>

									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
				<block v-if="tabActive==5">
					<view class="list-content">
						<view class="list-col">
							<view v-for="(item,index) in list.colA" :key="item.id"
								@click="jump('/pages/food/detail?id='+item.id)" class="list-item">
								<view class="photo-block">
									<image mode="widthFix" class="photo" :src="item.picUrl"></image>
									<view v-if=" item.viewList" class="position">
										<view class="iconfont icon-weizhi"></view>酒泉地区排行第{{item.viewList}}名
									</view>
								</view>
								<view class="info">
									<view class="title">{{item.title}}</view>
									<view v-if="item.pricePer" class="price-block">
										<view class="price">{{item.pricePer}}/人</view>
									</view>
									<view class="label-block">
										<view v-for="(item1,index1) in item.label" class="label-item">{{item1}}</view>
									</view>
								</view>
							</view>
						</view>
						<view class="list-col">
							<view v-for="(item,index) in list.colB" :key="item.id"
								@click="jump('/pages/food/detail?id='+item.id)" class="list-item">
								<view class="photo-block">
									<image mode="widthFix" class="photo" :src="item.picUrl"></image>
									<view v-if=" item.viewList" class="position">
										<view class="iconfont icon-weizhi"></view>酒泉地区排行第{{item.viewList}}名
									</view>
								</view>
								<view class="info">
									<view class="title">{{item.title}}</view>
									<view v-if="item.pricePer" class="price-block">
										<view class="price">{{item.pricePer}}/人</view>
									</view>
									<view class="label-block">
										<view v-for="(item1,index1) in item.label" class="label-item">{{item1}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getFindAllHotelOdApi,
		getFindViewListApi,
		getFindTravelListApi,
		getFindSpecialtyDetailListApi,
		findFindAllSnackOdApi
	} from '@/api/find.js';

	export default {
		data() {
			return {
				custom: null,
				list: {
					colA: [],
					colB: []
				},
				tabActive: 1,
				tab: [{
						id: 1,
						value: '民宿/酒店'
					},
					{
						id: 2,
						value: '景点'
					},
					{
						id: 3,
						value: '旅服'
					},
					{
						id: 4,
						value: '特产'
					},
					{
						id: 5,
						value: '美食'
					},
				],
			}
		},
		methods: {
			jump(url) {
				if (url) {
					uni.navigateTo({
						url
					})
				}
			},
			getList(e) {
				if (e == 1) {
					getFindAllHotelOdApi().then((res) => {
						if (res.code == 1) {
							this.list.colA = res.dataA
							this.list.colB = res.dataB

						} else {
							uni.showToast({
								title: '加载失败',
								mask: true,
							})
						}
					}).catch((res) => {
						console.log(res)
					})
				}
				if (e == 2) {
					getFindViewListApi().then((res) => {
						if (res.code == 1) {
							this.list.colA = res.dataA
							this.list.colB = res.dataB
							console.log(1111111111)
							console.log(this.list.colA)
						} else {
							uni.showToast({
								title: '加载失败',
								mask: true,
							})
						}
					}).catch((res) => {
						console.log(res)
					})
				}
				if (e == 3) {
					getFindTravelListApi().then((res) => {
						if (res.code == 1) {
							this.list.colA = res.dataA
							this.list.colB = res.dataB
						} else {
							uni.showToast({
								title: '加载失败',
								mask: true,
							})
						}
					}).catch((res) => {
						console.log(res)
					})
				}

				if (e == 4) {
					getFindSpecialtyDetailListApi().then((res) => {
						if (res.code == 1) {
							this.list.colA = res.dataA
							this.list.colB = res.dataB

						} else {
							uni.showToast({
								title: '加载失败',
								mask: true,
							})
						}
					}).catch((res) => {
						console.log(res)
					})
				}

				if (e == 5) {
					findFindAllSnackOdApi().then((res) => {
						if (res.code == 1) {
							this.list.colA = res.dataA
							this.list.colB = res.dataB
							console.log(this.list.colA)
						} else {
							uni.showToast({
								title: '加载失败',
								mask: true,
							})
						}
					}).catch((res) => {
						console.log(res)
					})
				}


			},
		},
		mounted() {
			/*自适应微信胶囊按钮*/
			this.custom = this.utils.getCustomNavData();
		},
		onShow() {
			this.getList(1)
			this.tabActive = 1;
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		overflow: hidden;

		.top-bg {
			width: 100%;
			position: absolute;
		}

		.block {
			position: relative;
		}

		.block.list-block {
			width: 100%;
			box-shadow: 0 -5px 15px 0px rgba(0, 0, 0, 0.08);
			margin-top: 150rpx;
			border-radius: 20rpx 20rpx 0 0;
			display: flex;
			flex-direction: column;
			background: #fff;

			.list-tab-block {
				width: 100%;
				overflow-x: scroll;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding-left: 40rpx;
				margin-bottom: 20rpx;

				.list-tab-item {
					color: $color-regular-text;
					font-size: 30rpx;
					flex: none;
					margin-right: 70rpx;
					display: flex;
					align-items: center;
					height: 90rpx;
				}

				.list-tab-item.active {
					font-size: 34rpx;
					color: $color-primary-text;
					font-weight: bold;
					background: url('@/static/home/tab_active.png') no-repeat bottom center;
					background-size: 60rpx;
				}
			}

			.list-tab-block::-webkit-scrollbar {
				display: none;
			}

			.list-content-block {
				width: 100%;
				padding: 0 20rpx;

				.list-content {
					width: 100%;
					display: flex;
					flex-direction: row;
					margin-top: 20rpx;
					padding-bottom: 20rpx;

					.list-col {
						width: calc(50% - 10rpx);
						margin-right: 20rpx;
						display: flex;
						flex-direction: column;

						.list-item {
							width: 100%;
							display: flex;
							flex-direction: column;
							margin-bottom: 20rpx;

							.photo-block {
								width: 100%;
								position: relative;
								display: flex;
								flex-direction: row;

								.photo {
									width: 100%;
									border-radius: 10rpx;
								}

								.position {
									position: absolute;
									width: 100%;
									bottom: 20rpx;
									left: 8rpx;
									color: #fff;
									font-size: 24rpx;
									display: flex;

									.iconfont {
										margin-right: 10rpx;
									}
								}
							}

							.info {
								display: flex;
								flex-direction: column;

								.title {
									font-weight: bold;
									font-size: 30rpx;
									margin-top: 12rpx;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 2;
									overflow: hidden;
								}

								.label-block {
									width: 100%;
									display: flex;
									flex-direction: row;
									margin-top: 12rpx;
									flex-wrap: wrap;

									.label-item {
										font-size: 24rpx;
										padding: 0 10rpx;
										background: #efefef;
										color: $color-secondary-text;
										border-radius: 8rpx;
										margin-right: 16rpx;
										margin-bottom: 10rpx;
									}
								}

								.price-block {
									display: flex;
									flex-direction: row;
									font-size: 26rpx;
									padding-right: 10rpx;
									align-items: center;

									.price {
										flex-grow: 1;
										font-size: 32rpx;
										color: $color-danger;
										font-weight: bold;
									}

									.sold-num {
										flex-grow: 0;
										color: $color-secondary-text;
									}
								}
							}
						}

						.list-item:last-child {
							margin-bottom: 0;
						}
					}

					.list-col:last-child {
						margin-right: 0;
					}
				}
			}
		}
	}
</style>
